<template>
    <transition name="slide-right">
        <v-touch class="content" v-on:swiperight="" style="overflow: hidden">
            <div class="content-return">
                <span class="address-left mui-icon mui-icon-back" @click="backRoute()"></span>
            </div>
            <div class="content-mnemonic">

                <div class="mnemonic-iconfont">
                    <img src="@/assets/img/write.png" alt="">
                </div>
                <div class="mnemonic-title">{{ $t('m.wallet.backup.verify.listTitle') }}</div>
            </div>
            <div class="content-hint">{{ $t('m.wallet.backup.verify.prompt[0]') }}</div>
            <div class="content-danger-two" v-show="error">{{ $t('m.wallet.backup.verify.prompt[1]') }}</div>
            <div class="content-english">
                <div v-for="(item,index) in select" :key="index" @click="remove(item)">{{ item }}</div>
            </div>
            <div class="content-english-to">
                <div v-for="(item,index) in mnemonicRandom" :key="index" @click="add(item,index)">{{ item }}</div>
            </div>
            <div class="content-next background1" v-if="complete" @click="backup()">{{ $t('m.wallet.backup.verify.prompt[2]') }}</div>
            <div class="content-next" v-else>{{ $t('m.wallet.backup.verify.prompt[2]') }}</div>

        </v-touch>
    </transition>
</template>
<script>
    /* eslint-disable */

    import {mapGetters} from 'vuex'
    import {backupDone} from '@/assets/js/etherjs/wallet'

    export default {
        name: 'wallet_backup_verify',
        mounted() {
        },
        create() {
        },
        computed: {
            ...mapGetters("wallet", {
                mnemonic: "getMnemonicArray",
                mnemonicRandom: "getMnemonicArrayRandom",
            })
        },
        data() {
            return {
                select: [],
                error: false,
                complete: false,
            }
        },
        methods: {
            add: function (item, index) {
                if (this.error) return;
                this.select.push(item);
                this.mnemonicRandom.splice(index, 1);
                if (item != this.mnemonic[this.select.length - 1]) {
                    this.error = true;
                }
                if (this.select.length == this.mnemonic.length) {
                    this.complete = true;
                }
            },
            remove: function (item) {
                this.error = false;
                for (let i in this.select) {
                    if (this.select[i] == item) {
                        this.select.splice(i, 1)
                        this.mnemonicRandom.push(item);
                    }
                }
                for (let i in this.select) {
                    if (this.select[i] != this.mnemonic[i]) {
                        this.error = true;
                        return
                    }
                }
            },
            backup: function () {
                backupDone().then(() => {
                    this.changeRoute("/index/wallet");
                });
            }
        }
    }
</script>
<style scoped>
    @import '../../../assets/css/verify.css';
    .background1 {
        background: #1087CD;
    }

    .content {
        background: #ffffff !important;
    }
</style>